<template>
  <div class='container'>
    <el-card>
      <!-- 添加试题按钮 -->
      <el-row>
        <el-col :offset= "21">
          <el-button class="addQuestion" type="success" size="small" @click="addQuestion">
            <i class="el-icon-edit"></i>新增试题
          </el-button>
        </el-col>
      </el-row>
      <!-- 搜索表单 -->
      <el-form ref="queryFormRef" :model="queryForm" label-width="80px" size="small">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select  v-model="queryForm.subjectID" placeholder="请选择" @change="subjectSelectChangeHandle">
              <el-option v-for="item in subjetList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select  v-model="queryForm.catalogID" placeholder="请选择">
              <el-option v-for="item in directoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select  v-model="queryForm.tags" placeholder="请选择">
              <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
              <el-input v-model="queryForm.keyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select  v-model="queryForm.questionType" placeholder="请选择">
              <el-option label="单选" :value="1"></el-option>
              <el-option label="多选" :value="2"></el-option>
              <el-option label="简答" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select  v-model="queryForm.difficulty" placeholder="请选择">
              <el-option label="简单" :value="1"></el-option>
              <el-option label="一般" :value="2"></el-option>
              <el-option label="困难" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select  v-model="queryForm.direction" placeholder="请选择">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select  v-model="queryForm.creatorID" placeholder="请选择">
              <el-option label="张三" value="1"></el-option>
              <el-option label="王思聪" value="2"></el-option>
              <el-option label="马化腾" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
              <el-input v-model="queryForm.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
              <el-input v-model="queryForm.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-col :span="8">
              <el-select  v-model="queryForm.province" @change="cityChangeHandle">
                <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select  v-model="queryForm.city">
                <el-option v-for="(item,index) in cityAreaList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-col :offset="6">
            <el-form-item>
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="searchQuestion">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
      <!-- 提示信息 -->
      <template>
         <el-alert title="数据一共xx条" type="info" center show-icon size="mini"></el-alert>
      </template>
      <!-- 信息表格 -->
      <el-table :data="questionInfoList" border style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="140">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="60">
        </el-table-column>
        <el-table-column prop="catalog" label="目录">
        </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="200">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.addDate | date}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">中等</span>
              <span v-else-if="scope.row.difficulty === '3'">困难</span>
              <span v-else>{{scope.row.difficulty}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.chkState === 0">未定义</span>
              <span v-else-if="scope.row.chkState === 1">待审核</span>
              <span v-else-if="scope.row.chkState === 2">通过</span>
              <span v-else-if="scope.row.chkState === 3">拒绝</span>
              <span v-else>{{scope.row.chkState}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="160">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="100">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.publishState === 0">未定义</span>
              <span v-else-if="scope.row.publishState === 1">待发布</span>
              <span v-else-if="scope.row.publishState === 2">已发布</span>
              <span v-else-if="scope.row.publishState === 3">已下架</span>
              <span v-else>{{scope.row.publishState}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button plain type="text" @click="showPreview(scope.row)">预览</el-button>
            <el-button plain type="text" @click="toCheck(scope.row)" :disabled="scope.row.chkState=== 1||0 ? false : true">审核</el-button>
            <el-button plain type="text" @click="edit(scope.row)" :disabled="scope.row.publishState === 1||scope.row.publishState === 3 ? false : true">修改</el-button>
            <el-button plain type="text" @click="publish(scope.row)"  v-if="scope.row.publishState===3||scope.row.publishState===1">上架</el-button>
            <el-button plain type="text" @click="publish(scope.row)" v-else>下架</el-button>
            <el-button plain type="text" @click="deleteQuestion(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页导航 -->
      <el-col :offset="15">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page" :page-sizes="[6, 10, 20, 30]" :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="total" >
        </el-pagination>
      </el-col>
    </el-card>
    <!-- 试题预览区域 -->
    <el-dialog title="题目预览" :visible.sync="previewVisible" width="55%">
      <el-row class="text">
        <el-col :span="6">
          <span v-if="previewQuestion.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="previewQuestion.questionType === '2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">
          <span> 【编号】：{{ previewQuestion.id }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="previewQuestion.difficulty === '1'">【题型】：简单</span>
          <span v-else-if="previewQuestion.difficulty === '2'">【题型】：一般</span>
          <span v-else>【题型】：困难</span>
        </el-col>
        <el-col :span="6">
          <span> 【标签】：{{ previewQuestion.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="text">
        <el-col :span="6">
          <span>【学科】：{{ previewQuestion.subject }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ previewQuestion.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ previewQuestion.direction }}</span>
        </el-col>
        <el-col :span="6"> </el-col>
      </el-row>
      <hr />
      <span>[题干:]</span><br />
      <span  style="color:blue ; margin: 10px 0" v-html="previewQuestion.question"></span>
      <div>
        <div v-if="previewQuestion.questionType='1'">
          <span>{{previewQuestion.questionType | questionType}} 选项 : (以下选中的选项为正确答案)</span>
        </div>
        <div v-else-if="previewQuestion.questionType='2'">
          <span>{{previewQuestion.questionType | questionType}} 选项 : (以下选中的选项为正确答案)</span>
        </div>
        <div v-else>
          <span>{{previewQuestion.questionType | questionType}} 答案</span>
        </div>
      </div>
      <!-- 单选框 -->
      <!-- data中的数据 radio: 1  由于单选框只有一个isRight 判断相等 按钮选中-->
      <el-radio-group v-model="radio" v-if="previewQuestion.questionType === '1'" disabled>
        <el-row v-for="(item, index) in previewQuestion.options" :key="index" style="margin:10px 0px">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <!-- 多选框 -->
      <div v-if="previewQuestion.questionType === '2'">
        <el-row v-for="(item, index) in options" :key="index" style="margin:10px 0px">
          <el-checkbox v-model="item.isRight" disabled> {{ item.title }} </el-checkbox>
        </el-row>
      </div>
      <hr />
      【参考答案】：<el-button type="danger" @click="isVideoShow = true">视频答案预览</el-button>
      <el-row style="margin-top:20px;" v-if="isVideoShow">
        <video :src="previewQuestion.videoURL" controls="controls" class="video"></video>
      </el-row>
      <div v-html="previewQuestion.answer"></div>
      <hr />
      <el-row class="answer">
        <span>【答案解析】：https://cn.vuejs.org/ 有答案 </span>
      </el-row>

      <hr />
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false" type="primary" size="mini">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 试题审核区域 -->
    <el-dialog title="题目审核" :visible.sync="checkVisible" width="30%">
      <el-form ref="checkForm" :model="checkForm" label-width="80px" size="small" :rules="checkRules">
        <el-form-item label="审核意见" prop="chkRemarks">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="checkForm.chkRemarks">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="checkForm.chkState" :label="2">通过</el-radio>
          <el-radio v-model="checkForm.chkState" :label="3">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="check">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { choice, remove, choiceAdd, detail, choiceCheck, choicePublish } from '@/api/hmmm/questions'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { list as tagList } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as userList } from '@/api/base/users.js'
export default {
  data () {
    return {
      radio: 1,
      total: 0,
      queryForm: {
        page: 1,
        pagesize: 6,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalpgID: null,
        chkState: null
      },
      checkForm: {
        id: Number,
        chkRemarks: '',
        chkState: 2
      },
      checkRules: {
        chkRemarks: [{ required: true, message: '请输入审核意见!', trigger: 'blur' }]
      },
      checkVisible: false,
      isVideoShow: false,
      previewVisible: false,
      previewQuestion: {},
      questionInfoList: [],
      subjetList: [],
      directoryList: [],
      tagList: [],
      cityList: [],
      cityAreaList: [],
      userList: []
    }
  },
  created () {
    this.getQuestions()
    this.getSubjectList()
    this.getAllCity()
    this.getCreator()
  },
  methods: {
    // 获取问题列表的函数
    getQuestions () {
      choice(this.queryForm)
        .then(res => {
          this.questionInfoList = res.data.items
          this.total = res.data.counts
          console.log(this.questionInfoList)
        })
        .catch(err => { console.log(err) })
    },
    // 获取学科列表的函数
    getSubjectList () {
      subjectList()
        .then(res => {
          this.subjetList = res.data
        })
        .catch(err => { console.log(err) })
    },
    // 学科列表切换时获取 二级目录&标签 的函数
    subjectSelectChangeHandle () {
      this.queryForm.catalogID = null
      this.queryForm.tags = null
      directoryList({ subjectID: this.queryForm.subjectID })
        .then(res => {
          console.log(this.directoryList)
          this.directoryList = res.data
        })
        .catch(err => { console.log(err) })
      tagList({ subjectID: this.queryForm.subjectID })
        .then(res => {
          this.tagList = res.data.items
        })
        .catch(err => { console.log(err) })
    },
    // 获取所有城市信息
    getAllCity () {
      this.cityList = provinces()
    },
    // 城市改变时的处理函数
    cityChangeHandle () {
      this.cityAreaList = citys(this.queryForm.province)
    },
    // 当前页码改变的处理函数
    handleCurrentChange (newPage) {
      this.queryForm.page = newPage
      this.getQuestions()
    },
    // 页面规模改变的处理函数
    handleSizeChange (pageSize) {
      this.queryForm.pagesize = pageSize
      this.getQuestions()
    },
    // 点击清除按钮 重置表单
    resetForm () {
      for (const key in this.queryForm) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.queryForm[key] = null
      }
      // 更新题库列表
      this.getQuestions(this.queryForm)
    },
    // 点击搜索按钮 搜索
    searchQuestion () {
      this.getQuestions(this.queryForm)
    },
    // 新增试题 页面跳转
    addQuestion () {
      this.$router.push('/questions/new')
    },
    // 删除问题
    async deleteQuestion (row) {
      // 提示框
      const result = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果确认删除执行删除逻辑
      if (result === 'confirm') {
        const data = await remove(row)
        if (data.status === 200) {
          this.getQuestions(this.queryForm)
          return this.$message.success('删除成功')
        }
      }
    },
    // 获取录入人
    getCreator () {
      userList('')
        .then(res => {
          this.userList = res.list
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 显示题目预览
    async showPreview (row) {
      const { data: res } = await detail({ id: row.id })
      this.previewVisible = true
      this.previewQuestion = res
    },
    // 加入精选
    async choiceAdd (item) {
      const result = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      // 如果确认就加入精选 否则什么都不做
      if (result === 'confirm') {
        const data = await choiceAdd({
          id: item.id,
          choiceState: 1
        })
        if (data.status === 200) {
          this.$message.success('加入精选成功')
        }
        // 更新题库列表
        this.getQuestions(this.queryForm)
      }
    },
    toCheck (row) {
      this.checkVisible = true
      this.checkForm.id = row.id
    },
    async check () {
      const { data: res } = await choiceCheck(this.checkForm)
      const { data: res1 } = await choicePublish({
        id: this.checkForm.id,
        publishState: 1
      })
      console.log(res, res1)
      this.getQuestions()
      this.checkVisible = false
    },
    edit (row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    },
    async publish (row) {
      const { data: res } = await choicePublish({
        id: row.id,
        publishState: row.publishState === 2 ? 3 : 2
      })
      console.log(res)
      this.getQuestions()
    },
    cancel () {
      this.checkForm.id = Number
      this.checkForm.chkState = Number
      this.checkForm.chkRemark = ''
      this.checkVisible = false
    }
  },
  filters: {
    questionType: function (value) {
      switch (value) {
        case '1':
          return '单选题'
        case '2':
          return '多选题'
        case '3':
          return '简答题'
      }
    },
    difficulty: function (value) {
      switch (value) {
        case '1':
          return '简单'
        case '2':
          return '中等'
        case '3':
          return '困难'
      }
    },
    date: function (value) {
      const a = value.replace(/T/, ' ')
      const b = a.replace('.000Z', ' ')
      return b
    }
  }
}
</script>
<style scoped lang='scss'>
.questionPreviewInfo {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  list-style: none;
}
.questionPreviewInfo li {
  width: 50%!important;
}
.addQuestion {
  margin: 0 0 15px 0;
}
.el-select {
  width: 100%;
}
</style>
